<template>
  <div class="commodity" @click="onClickList">
    <!-- 商品展示 卡片型 -->
    <div class="pic">
      <img :src="defaultData.url">
    </div>
    <div class="txt">
      <div class="til">
        <h4>{{defaultData.til}}</h4>
      </div>
      <flexbox :gutter="0">
        <flexbox-item :span="1/2">
          <div class="money">
            ￥<span class="red">{{defaultData.money}}</span>
          </div>
        </flexbox-item>
        <flexbox-item :span="1/2">
          <div class="shopcar">
            <div class="shopico" @click.stop="onShopcar">
              <x-icon type="ios-cart" class="icon-white"></x-icon>
            </div>
          </div>
        </flexbox-item>
      </flexbox>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { Flexbox, FlexboxItem,  } from 'vux'
  import {isEmptyValue,depcopy,PulsStoreShopCar} from '@/utils/auth'
    export default {
        name: "commodity-car",
      props:['DefData'],
      components: {
        Flexbox,
        FlexboxItem,
      },
      data(){
          return{
            defaultData:this.DefData
          }
      },
      mounted(){
        Vue.set(this.defaultData, 'number', 1);
      },
      methods:{
        onShopcar(){
          console.log('加入购物车');
          let od = this.defaultData;

          PulsStoreShopCar(od,1);

        },
        onClickList(){ //跳转至详情页
          let id = this.defaultData.id;
          this.$router.push({path: '/shopSelect/shopInfo', query: { id: id }})
        }
      }
    }
</script>

<style lang="less" scoped>
  @import "../styles/anstyle";
.commodity{
  background: #FFFFFF;
  .pic{
    height: 172px;
    line-height: 172px;
    overflow: hidden;
    img{
      vertical-align: middle;
    }
  }
  .til{
    .tilelic;
    h4{
      font-size: 14px;
      font-weight: 400;
    }
  }
  .txt{
    padding: 10px;
    .money{
      color: @color-Danger;
      .red{
        font-size: 18px;
      }
    }
    .shopcar{
      text-align: right;
      position: relative;
      .shopico{
        position: absolute;
        right: 0;
        top: -15px;
        width: 20px;
        height: 20px;
        padding: 5px;
        background-color: @color-Danger;
        border-radius: 50%;
      }
    }
  }
}
</style>
